<template>
  <div class="tabs-view" :style="`--width:${firstLevelMenu && device === 'desktop' ? '200px' : '0px'}`">
    <div class="tabs-view-left" v-if="firstLevelMenu">
      <s-menu v-show="device === 'desktop'" mode="inline" :menu="menuList" :theme="navTheme"></s-menu>
    </div>
    <div class="tabs-view-right">
      <router-view v-if="reloadFlag" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
import SMenu from '../menu/'
import { getFilterMenu } from '@/utils/util'
import { mixin, mixinDevice } from '@/utils/mixin.js'

export default {
  components: { SMenu },
  mixins: [mixin, mixinDevice],
  data() {
    return {
      menuList: [],
      reloadFlag: true,
    }
  },
  computed: {
    ...mapState({
      // 后台菜单
      permissionMenuList: state => state.user.permissionList
    }),
  },
  watch: {
    '$route': function () {
      this.updateTabList()
    },
    curTab(nval) {
      let tCurPage = this.tabList.find(it => it.path === nval)
      if (tCurPage) {
        this.routeReload(tCurPage)
      }
    }
  },
  created() {
    this.updateTabList()
  },
  methods: {
    updateTabList() {
      let tMenuKeys = this.findTabMenu(this.$route.path, this.permissionMenuList)
      for (const key of tMenuKeys) {
        let tMenu = getFilterMenu(key, this.permissionMenuList)
        if (tMenu.component === 'layouts/TabsView') {
          this.menuList = tMenu.children || []
          return
        }
      }
    },
    findTabMenu(path, menus) {
      function dig(path, menus) {
        if (!menus || !menus.length) {
          return
        }

        for (let i = 0; i < menus.length; i++) {
          if (menus[i].path === path) {
            return []
          } else {
            if (menus[i].children) {
              let res = dig(path, menus[i].children || [])
              if (res !== undefined) {
                return res.concat(menus[i].path).reverse()
              }
            }
          }
        }
      }
      let tKeys = dig(path, menus)
      return tKeys
    },

    routeReload() {
      this.reloadFlag = false
      let ToggleMultipage = "ToggleMultipage"
      this.$store.dispatch(ToggleMultipage, false)
      this.$nextTick(() => {
        this.$store.dispatch(ToggleMultipage, true)
        this.reloadFlag = true
      })
    },
  },
}
</script>

<style lang="less" scoped>
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: none !important;
}

.tabs-view {
  width: 100%;
  background-color: #fff;

  display: flex;

  .tabs-view-left {
    flex: 0 0 auto;

    width: var(--width);
    padding: 20px 0;
    border-right: 1px solid #e8e8e8;
  }

  .tabs-view-right {
    width: calc(100% - var(--width));
  }
}
</style>